
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-weibo"></i>
                    <div class="name">weibo</div>
                    <div class="fontclass">.icon-weibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wechat"></i>
                    <div class="name">wechat</div>
                    <div class="fontclass">.icon-wechat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qzone"></i>
                    <div class="name">qzone</div>
                    <div class="fontclass">.icon-qzone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-github"></i>
                    <div class="name">github</div>
                    <div class="fontclass">.icon-github</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhihu"></i>
                    <div class="name">zhihu</div>
                    <div class="fontclass">.icon-zhihu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-019"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-019</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erji"></i>
                    <div class="name">耳机</div>
                    <div class="fontclass">.icon-erji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gangqing_up"></i>
                    <div class="name">gangqing_up</div>
                    <div class="fontclass">.icon-gangqing_up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cidai_up"></i>
                    <div class="name">cidai_up</div>
                    <div class="fontclass">.icon-cidai_up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changpian_player"></i>
                    <div class="name">changpian_player</div>
                    <div class="fontclass">.icon-changpian_player</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changpian-1"></i>
                    <div class="name">changpian-1</div>
                    <div class="fontclass">.icon-changpian-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">laba</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erji1"></i>
                    <div class="name">erji</div>
                    <div class="fontclass">.icon-erji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-player"></i>
                    <div class="name">player</div>
                    <div class="fontclass">.icon-player</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jita"></i>
                    <div class="name">jita</div>
                    <div class="fontclass">.icon-jita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erjichatou"></i>
                    <div class="name">erjichatou</div>
                    <div class="fontclass">.icon-erjichatou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yixiang"></i>
                    <div class="name">yixiang</div>
                    <div class="fontclass">.icon-yixiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinfu"></i>
                    <div class="name">yinfu</div>
                    <div class="fontclass">.icon-yinfu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-maike"></i>
                    <div class="name">maike</div>
                    <div class="fontclass">.icon-maike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianshitai"></i>
                    <div class="name">电视台</div>
                    <div class="fontclass">.icon-dianshitai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baozhi"></i>
                    <div class="name">报纸</div>
                    <div class="fontclass">.icon-baozhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu-2"></i>
                    <div class="name">超市</div>
                    <div class="fontclass">.icon-gouwu-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongwu"></i>
                    <div class="name">宠物店</div>
                    <div class="fontclass">.icon-chongwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kouhong"></i>
                    <div class="name">丽人</div>
                    <div class="fontclass">.icon-kouhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu"></i>
                    <div class="name">便利店</div>
                    <div class="fontclass">.icon-gouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianshen"></i>
                    <div class="name">健身房</div>
                    <div class="fontclass">.icon-jianshen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-maikefeng"></i>
                    <div class="name">KTV</div>
                    <div class="fontclass">.icon-maikefeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiandai"></i>
                    <div class="name">银行</div>
                    <div class="fontclass">.icon-qiandai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiandao"></i>
                    <div class="name">理发店</div>
                    <div class="fontclass">.icon-jiandao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixiu"></i>
                    <div class="name">维修店</div>
                    <div class="fontclass">.icon-weixiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shubiao"></i>
                    <div class="name">网吧</div>
                    <div class="fontclass">.icon-shubiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoubing"></i>
                    <div class="name">电玩场</div>
                    <div class="fontclass">.icon-shoubing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yao-2"></i>
                    <div class="name">药店</div>
                    <div class="fontclass">.icon-yao-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiyi"></i>
                    <div class="name">洗衣店</div>
                    <div class="fontclass">.icon-xiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yao"></i>
                    <div class="name">药店</div>
                    <div class="fontclass">.icon-yao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tushu"></i>
                    <div class="name">图书馆</div>
                    <div class="fontclass">.icon-tushu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiyuan"></i>
                    <div class="name">医院</div>
                    <div class="fontclass">.icon-yiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifu"></i>
                    <div class="name">服装店</div>
                    <div class="fontclass">.icon-yifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yu"></i>
                    <div class="name">海洋馆</div>
                    <div class="fontclass">.icon-yu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianying"></i>
                    <div class="name">电影院</div>
                    <div class="fontclass">.icon-dianying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiweijiu"></i>
                    <div class="name">鸡尾酒</div>
                    <div class="fontclass">.icon-jiweijiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongjiu"></i>
                    <div class="name">红酒</div>
                    <div class="fontclass">.icon-hongjiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huoguo"></i>
                    <div class="name">火锅</div>
                    <div class="fontclass">.icon-huoguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hanbao"></i>
                    <div class="name">汉堡</div>
                    <div class="fontclass">.icon-hanbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kafei"></i>
                    <div class="name">咖啡</div>
                    <div class="fontclass">.icon-kafei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pisa"></i>
                    <div class="name">披萨</div>
                    <div class="fontclass">.icon-pisa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lizhi"></i>
                    <div class="name">荔枝</div>
                    <div class="fontclass">.icon-lizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaochuan"></i>
                    <div class="name">烤串</div>
                    <div class="fontclass">.icon-kaochuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianguan"></i>
                    <div class="name">面馆</div>
                    <div class="fontclass">.icon-mianguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianpin"></i>
                    <div class="name">甜品</div>
                    <div class="fontclass">.icon-tianpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xican"></i>
                    <div class="name">西餐</div>
                    <div class="fontclass">.icon-xican</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pijiu"></i>
                    <div class="name">啤酒</div>
                    <div class="fontclass">.icon-pijiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinliao"></i>
                    <div class="name">饮料</div>
                    <div class="fontclass">.icon-yinliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuiguo"></i>
                    <div class="name">水果</div>
                    <div class="fontclass">.icon-shuiguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongcan"></i>
                    <div class="name">中餐</div>
                    <div class="fontclass">.icon-zhongcan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bingbang"></i>
                    <div class="name">冰棒</div>
                    <div class="fontclass">.icon-bingbang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bingqilin"></i>
                    <div class="name">冰淇淋</div>
                    <div class="fontclass">.icon-bingqilin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cha"></i>
                    <div class="name">茶</div>
                    <div class="fontclass">.icon-cha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chushi"></i>
                    <div class="name">厨师</div>
                    <div class="fontclass">.icon-chushi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangong"></i>
                    <div class="name">办公</div>
                    <div class="fontclass">.icon-bangong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danche"></i>
                    <div class="name">单车</div>
                    <div class="fontclass">.icon-danche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dalei"></i>
                    <div class="name">打雷</div>
                    <div class="fontclass">.icon-dalei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dayi"></i>
                    <div class="name">大衣</div>
                    <div class="fontclass">.icon-dayi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buhang"></i>
                    <div class="name">步行</div>
                    <div class="fontclass">.icon-buhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-deshi"></i>
                    <div class="name">的士</div>
                    <div class="fontclass">.icon-deshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fengsvg"></i>
                    <div class="name">风svg</div>
                    <div class="fontclass">.icon-fengsvg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duanxiu"></i>
                    <div class="name">短袖</div>
                    <div class="fontclass">.icon-duanxiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huoche"></i>
                    <div class="name">火车</div>
                    <div class="fontclass">.icon-huoche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lunchuan"></i>
                    <div class="name">轮船</div>
                    <div class="fontclass">.icon-lunchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyi"></i>
                    <div class="name">会议</div>
                    <div class="fontclass">.icon-huiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-maozi"></i>
                    <div class="name">帽子</div>
                    <div class="fontclass">.icon-maozi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feiji"></i>
                    <div class="name">飞机</div>
                    <div class="fontclass">.icon-feiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-motuo"></i>
                    <div class="name">摩托</div>
                    <div class="fontclass">.icon-motuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingtian"></i>
                    <div class="name">晴天</div>
                    <div class="fontclass">.icon-qingtian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qichuang"></i>
                    <div class="name">起床</div>
                    <div class="fontclass">.icon-qichuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaya"></i>
                    <div class="name">刷牙</div>
                    <div class="fontclass">.icon-shuaya</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tounaofengbao"></i>
                    <div class="name">头脑风暴</div>
                    <div class="fontclass">.icon-tounaofengbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xue"></i>
                    <div class="name">雪</div>
                    <div class="fontclass">.icon-xue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yejian"></i>
                    <div class="name">夜间</div>
                    <div class="fontclass">.icon-yejian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weiyi"></i>
                    <div class="name">卫衣</div>
                    <div class="fontclass">.icon-weiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yutian"></i>
                    <div class="name">雨天</div>
                    <div class="fontclass">.icon-yutian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xie"></i>
                    <div class="name">鞋</div>
                    <div class="fontclass">.icon-xie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuehui"></i>
                    <div class="name">约会</div>
                    <div class="fontclass">.icon-yuehui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changxiu"></i>
                    <div class="name">长袖</div>
                    <div class="fontclass">.icon-changxiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wendu"></i>
                    <div class="name">温度</div>
                    <div class="fontclass">.icon-wendu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuijue"></i>
                    <div class="name">睡觉</div>
                    <div class="fontclass">.icon-shuijue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanku"></i>
                    <div class="name">站酷</div>
                    <div class="fontclass">.icon-zhanku</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuibo"></i>
                    <div class="name">追波</div>
                    <div class="fontclass">.icon-zhuibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhadan"></i>
                    <div class="name">炸弹</div>
                    <div class="fontclass">.icon-zhadan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhu"></i>
                    <div class="name">猪</div>
                    <div class="fontclass">.icon-zhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuechi"></i>
                    <div class="name">钥匙</div>
                    <div class="fontclass">.icon-yuechi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuqiu-2"></i>
                    <div class="name">足球-2</div>
                    <div class="fontclass">.icon-zuqiu-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuqiu"></i>
                    <div class="name">足球</div>
                    <div class="fontclass">.icon-zuqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yumaoqiu"></i>
                    <div class="name">羽毛球</div>
                    <div class="fontclass">.icon-yumaoqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinlehe"></i>
                    <div class="name">音乐盒</div>
                    <div class="fontclass">.icon-yinlehe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenfenzheng"></i>
                    <div class="name">身份证</div>
                    <div class="fontclass">.icon-shenfenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiqiu"></i>
                    <div class="name">气球</div>
                    <div class="fontclass">.icon-qiqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinbi"></i>
                    <div class="name">金币</div>
                    <div class="fontclass">.icon-jinbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingpangqiu"></i>
                    <div class="name">乒乓球</div>
                    <div class="fontclass">.icon-pingpangqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangqiu"></i>
                    <div class="name">网球</div>
                    <div class="fontclass">.icon-wangqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meiguihua"></i>
                    <div class="name">玫瑰花</div>
                    <div class="fontclass">.icon-meiguihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dian"></i>
                    <div class="name">电</div>
                    <div class="fontclass">.icon-dian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lanqiu"></i>
                    <div class="name">篮球</div>
                    <div class="fontclass">.icon-lanqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dao"></i>
                    <div class="name">刀</div>
                    <div class="fontclass">.icon-dao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baolingqiu-2"></i>
                    <div class="name">保龄球-2</div>
                    <div class="fontclass">.icon-baolingqiu-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuizi"></i>
                    <div class="name">锤子</div>
                    <div class="fontclass">.icon-chuizi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baolingqiu"></i>
                    <div class="name">保龄球</div>
                    <div class="fontclass">.icon-baolingqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-DJ"></i>
                    <div class="name">DJ</div>
                    <div class="fontclass">.icon-DJ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-behance"></i>
                    <div class="name">behance</div>
                    <div class="fontclass">.icon-behance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianpan"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.icon-jianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoguo"></i>
                    <div class="name">包裹</div>
                    <div class="fontclass">.icon-baoguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-UIzhongguo"></i>
                    <div class="name">UI中国</div>
                    <div class="fontclass">.icon-UIzhongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoutiyinxiang"></i>
                    <div class="name">shoutiyinxiang</div>
                    <div class="fontclass">.icon-shoutiyinxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinyueset"></i>
                    <div class="name">yinyueset</div>
                    <div class="fontclass">.icon-yinyueset</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinfu1"></i>
                    <div class="name">yinfu1</div>
                    <div class="fontclass">.icon-yinfu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianjita"></i>
                    <div class="name">dianjita</div>
                    <div class="fontclass">.icon-dianjita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gameplayer"></i>
                    <div class="name">gameplayer</div>
                    <div class="fontclass">.icon-gameplayer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-maike1"></i>
                    <div class="name">maike1</div>
                    <div class="fontclass">.icon-maike1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ipod"></i>
                    <div class="name">ipod</div>
                    <div class="fontclass">.icon-ipod</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-girl"></i>
                    <div class="name">用户（女）</div>
                    <div class="fontclass">.icon-user-girl</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-degree"></i>
                    <div class="name">学位</div>
                    <div class="fontclass">.icon-degree</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-email"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-email</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-position"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-position</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-project"></i>
                    <div class="name">项目</div>
                    <div class="fontclass">.icon-project</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-set"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-boy"></i>
                    <div class="name">用户（男）</div>
                    <div class="fontclass">.icon-user-boy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-college"></i>
                    <div class="name">机构</div>
                    <div class="fontclass">.icon-college</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pc"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-pc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prompt"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-prompt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-medal"></i>
                    <div class="name">奖牌</div>
                    <div class="fontclass">.icon-medal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-debug"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-debug</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-sound</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-watch"></i>
                    <div class="name">手表</div>
                    <div class="fontclass">.icon-watch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-battery"></i>
                    <div class="name">电池</div>
                    <div class="fontclass">.icon-battery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chicken"></i>
                    <div class="name">小鸡</div>
                    <div class="fontclass">.icon-chicken</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou122"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou122</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou1"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-red_envelope"></i>
                    <div class="name">中国风春节元素Icon</div>
                    <div class="fontclass">.icon-red_envelope</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tangerine"></i>
                    <div class="name">tangerine</div>
                    <div class="fontclass">.icon-tangerine</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tangyuan"></i>
                    <div class="name">tangyuan</div>
                    <div class="fontclass">.icon-tangyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-spring"></i>
                    <div class="name">spring</div>
                    <div class="fontclass">.icon-spring</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baozi"></i>
                    <div class="name">baozi</div>
                    <div class="fontclass">.icon-baozi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-boy"></i>
                    <div class="name">boy</div>
                    <div class="fontclass">.icon-boy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-festival"></i>
                    <div class="name">festival</div>
                    <div class="fontclass">.icon-festival</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-firecracker"></i>
                    <div class="name">firecracker</div>
                    <div class="fontclass">.icon-firecracker</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fish"></i>
                    <div class="name">fish</div>
                    <div class="fontclass">.icon-fish</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chinese_lion"></i>
                    <div class="name">chinese_lion</div>
                    <div class="fontclass">.icon-chinese_lion</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-girl"></i>
                    <div class="name">girl</div>
                    <div class="fontclass">.icon-girl</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lantern"></i>
                    <div class="name">lantern</div>
                    <div class="fontclass">.icon-lantern</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-knot"></i>
                    <div class="name">knot</div>
                    <div class="fontclass">.icon-knot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lucky_coin"></i>
                    <div class="name">lucky_coin</div>
                    <div class="fontclass">.icon-lucky_coin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plum_flower"></i>
                    <div class="name">plum_flower</div>
                    <div class="fontclass">.icon-plum_flower</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dragon_chen"></i>
                    <div class="name">dragon_chen</div>
                    <div class="fontclass">.icon-dragon_chen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dog_xu"></i>
                    <div class="name">dog_xu</div>
                    <div class="fontclass">.icon-dog_xu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dog"></i>
                    <div class="name">中国风十二生肖</div>
                    <div class="fontclass">.icon-dog</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goat"></i>
                    <div class="name">goat</div>
                    <div class="fontclass">.icon-goat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goat_wei"></i>
                    <div class="name">goat_wei</div>
                    <div class="fontclass">.icon-goat_wei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dragon"></i>
                    <div class="name">dragon</div>
                    <div class="fontclass">.icon-dragon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-horse"></i>
                    <div class="name">horse</div>
                    <div class="fontclass">.icon-horse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-monkey_shen"></i>
                    <div class="name">monkey_shen</div>
                    <div class="fontclass">.icon-monkey_shen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ox_chou"></i>
                    <div class="name">ox_chou</div>
                    <div class="fontclass">.icon-ox_chou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-monkey"></i>
                    <div class="name">monkey</div>
                    <div class="fontclass">.icon-monkey</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-horse_wu"></i>
                    <div class="name">horse_wu</div>
                    <div class="fontclass">.icon-horse_wu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ox"></i>
                    <div class="name">ox</div>
                    <div class="fontclass">.icon-ox</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rabbit_mao"></i>
                    <div class="name">rabbit_mao</div>
                    <div class="fontclass">.icon-rabbit_mao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rabbit"></i>
                    <div class="name">rabbit</div>
                    <div class="fontclass">.icon-rabbit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rat_zi"></i>
                    <div class="name">rat_zi</div>
                    <div class="fontclass">.icon-rat_zi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rat"></i>
                    <div class="name">rat</div>
                    <div class="fontclass">.icon-rat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rooster_you"></i>
                    <div class="name">rooster_you</div>
                    <div class="fontclass">.icon-rooster_you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rooster"></i>
                    <div class="name">rooster</div>
                    <div class="fontclass">.icon-rooster</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-snake_si"></i>
                    <div class="name">snake_si</div>
                    <div class="fontclass">.icon-snake_si</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tiger_yin"></i>
                    <div class="name">tiger_yin</div>
                    <div class="fontclass">.icon-tiger_yin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-snake"></i>
                    <div class="name">snake</div>
                    <div class="fontclass">.icon-snake</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tiger"></i>
                    <div class="name">tiger</div>
                    <div class="fontclass">.icon-tiger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-boar"></i>
                    <div class="name">boar</div>
                    <div class="fontclass">.icon-boar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-boar_hai"></i>
                    <div class="name">boar_hai</div>
                    <div class="fontclass">.icon-boar_hai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baisoft-xie-top"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-baisoft-xie-top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou2"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-jiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin1"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuchekong"></i>
                    <div class="name">购物车空</div>
                    <div class="fontclass">.icon-gouwuchekong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouxiajiang"></i>
                    <div class="name">箭头 下降</div>
                    <div class="fontclass">.icon-jiantouxiajiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cart-copy"></i>
                    <div class="name">购物车空</div>
                    <div class="fontclass">.icon-cart-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nan"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nv"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.icon-nv</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
